<template>
  <div class="tag-container">
    <div class="show-tag">
      <h1>{{ queryTag.tag }}</h1>
      <span>{{ queryTag.count }} 文章</span>
      <Sort @sort="searchData" />
    </div>
    <template v-if="queryTag.articles.length">
      <template v-for="article of queryTag.articles">
        <ArticleCard :article="article" />
      </template>
    </template>
    <template v-else>
      <div class="not-data"><h1>暂时还没有该标签的文章 来写一个吧~</h1></div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { watch, reactive } from "vue";
import { useRoute } from "vue-router";
import { getTagArticle } from "@/service/article";
import ArticleCard from "@/components/ArticleCard/ArticleCard.vue";
import Sort from "@/components/Sort/Sort.vue";
const route = useRoute();
const queryTag = reactive({
  tag: "",
  count: 0,
  articles: [] as any[]
});
const searchData = async (current = 0) => {
  const res: any = await getTagArticle(route.query.tag as string, current);
  queryTag.tag = route.query.tag as string;
  queryTag.count = res.data.count;
  queryTag.articles = res.data.articles;
};
watch(
  () => route.query,
  () => {
    searchData();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style scoped lang="less">
.tag-container {
  width: 100%;
  margin: 60px auto 0;
  .show-tag {
    position: fixed;
    left: 0;
    display: flex;
    z-index: 99;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 12rem;
    justify-content: center;
    background-color: rgba(248, 249, 250, 0.7);
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    h1 {
      display: inline-block;
    }
  }

  .sort-container {
    position: absolute;
    bottom: 10px;
    margin-top: 20px;
  }
  .article-item:nth-child(2) {
    margin: 200px auto 0;
  }
}
</style>
